.header-sep {
  background: $header-border-color;
  width: 100%;
  height: 1px;
  position: sticky;
  top: 64px;
  z-index: 1;
}

.header-sep-overlay {
  background: $body-background;
  width: 100%;
  height: 1px;
  z-index: 1;
  transform: translate(0, -1px);
  position: relative;
}

.p-header {
  position: relative;
  background-color: $secondary-color;
  position: sticky;
  top: 0;
  background: $body-background;
  z-index: 2;
  display: flex;
  justify-content: center;


  > .row {
    height: 64px;
    width: 100%;
    margin: 0;
    padding: 0 32px;
    max-width: 1440px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  

  &--home {
    padding-bottom: 0;
    background-color: $body-background;
    background-repeat: no-repeat;
    background-position: left 50% bottom 100px;
    background-size: cover;
    z-index: 3;
  }

  &--error-page {
    background: $secondary-color;
  }

  .logo {
    img {
      height: 32px;
    }

    span {
      color: $body-font-color;
      font-weight: 600;
      font-size: 18px;
      margin-left: 5px;
      vertical-align: middle;
    }
  }

  .left-al {
    padding-left: 0;
  }
  .right-al {
    padding-right: 0;
  }

  .nav-wr {
    justify-content: flex-end;
    display: flex;
  }

  .menu-btn {
    width: 26px;
    height: 20px;
    background: url('../img/burger_menu.svg') 0 0 no-repeat;
    background-size: contain;
    cursor: pointer;
    filter: invert(0.5);
  }
}

.main-nav {
  .social-links {
    display: flex;
    align-items: center;

    .item {
      min-width: 26px;
      margin-left: 12px;

      &:first-child {
        margin-left: 0;
      }

      a {
        font-size: 20px;
        line-height: 1;
        display: block;
        color: color-mix(in srgb, $body-font-color, #ffffff 30%);
        transition: color 0.3s ease;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }

  @include breakpoint(large down) {
    position: fixed;
    left: 100vw;
    top: 0;
    width: 100vw;
    height: 100vh;
    transition: all 0.2s ease-in-out 0s;
    padding: 50px 30px;
    background: $body-background;
    z-index: 10;

    &.is-active {
      left: 0;
    }

    .close-btn {
      width: 26px;
      height: 26px;
      background: url('../img/burger_menu_close.svg') 0 0 no-repeat;
      background-size: contain;
      position: absolute;
      top: 30px;
      right: 25px;
      cursor: pointer;
      filter: invert(0.5);
    }

    .menu {
      margin-bottom: 30px;

      .item {
        padding: 15px 0;
        border-bottom: 1px solid $border-color;

        a {
          color: $body-font-color;
          font-weight: 600;

          &:hover,
          &:active,
          &:focus,
          &.is-active {
            color: $primary-color;
          }
        }
      }
    }
  }

  @include breakpoint(xlarge) {
    display: flex;
    justify-content: flex-end;

    .social-links {
      margin-left: 34px;
    }

    .menu {
      display: flex;

      .item {
        margin-left: 24px;

        a {
          display: block;
          font-size: 14px;
          font-weight: 600;
          color: $body-font-color;
          border-bottom: 4px solid transparent;
          transition: all 0.2s ease;

          &:hover,
          &:focus,
          &:active,
          &.is-active {
            color:  $primary-color;
          }
        }
      }
    }
  }
}
